﻿@model ORM.ViewModels.Guides.GuideListViewModel
@using ORM.Framework.Security;
@using ORM.Common;
@using ORM.Helpers
<div id="guideList">
    @foreach (var item in Model.Guides)
    {
        <table width="100%" style="padding-top: 5px">
            <colgroup>
                <col span="1" style="width: 20%;" />
                <col span="1" style="width: 80%;" />
            </colgroup>
            <tr>
                <td style="vertical-align: top; text-align: center; font-weight: bold">
                    <a class="titleLink" href="/Account/Details/@Html.DisplayFor(modelItem => item.PostedByUser.Id)">
                        <img src="@Url.UserAvatar(item.PostedByUser, ORM.Models.ImageType.Big)" alt="Ảnh đại diện" class="big-imgavatar" height="90px" width="90px" style="padding-top: 3px" /></a><br />
                    <div style="font-size: 12px;">
                        <a class="titleLink" href="/Account/Details/@Html.DisplayFor(modelItem => item.PostedByUser.Id)">@Html.DisplayFor(modelItem => item.PostedByUser.Username)</a>
                        <br />
                        <div style="color: dimgray">@item.PostedByUser.Ponit Điểm</div>
                    </div>
                </td>
                <td style="vertical-align: top">
                    <b><a class="titleLink" href="/Guide/Details/@Html.DisplayFor(modelItem => item.Id)" style="font-size: 17px">@Html.DisplayFor(modelItem => item.Title)</a>
                    </b>
                    <br />
                    <div style="font-size: 13px; padding-top: 5px; color: dimgray">
                        <a class="titleLink" href="/Guide/Index?deviceId=@item.Model.Device.Id&manufacturerId=@item.Model.Manufacturer.Id&modelId=@item.Model.Id" title="Xem các bài hướng dẫn cho @item.Model.Device.Name @item.Model.Manufacturer.Name @item.Model.Name">
                            @Html.DisplayFor(modelItem => item.Model.Device.Name)
                            @Html.DisplayFor(modelItem => item.Model.Manufacturer.Name)
                            @Html.DisplayFor(modelItem => item.Model.Name)
                        </a>
                        <span style="display: inline-block; width: 20px; text-align: center"> • </span>Loại bài: @item.GuideType.Name
                    </div>
                    <div style="font-size: 14px; padding-top: 5px; text-align: justify">
                        @Html.DisplayFor(modelItem => item.TitleSearch)
                    </div>
                    <br />
                    <div style="float: left; font-size: 13px; color: dimgray;">
                        <img src="/Content/Images/edit.ico" width="15px" height="15px" />
                        @Convert.ToDateTime(item.PostedDate).ToString("HH:mm") ngày @Convert.ToDateTime(item.PostedDate).ToString("dd-MM-yyyy")
                    </div>
                    <div style="float: right; font-size: 13px; color: dimgray;">
                        @Html.DisplayFor(modelItem => item.UpVotes) Người Thích - @Html.DisplayFor(modelItem => item.Views)
                        Lượt Xem
                    </div>
                </td>
            </tr>
        </table>
    
        <hr style="border: dashed 1px slategrey" />
    }
    <table width="100%">
        <tr>
            <td style="text-align: left; width: 20%">
                @if (Model.PageNo != 1)
                {
                    var targetDiv = "guideList";
                    var previousPage = @Model.PageNo - 1;
                    <input type="image" src="/Content/Images/hide-left.ico" id="btnGoFirst" onclick="GoToGuidePage('@Model.DeviceId', '@Model.ManufacturerId', '@Model.ModelId', '@Model.Condition', '@Model.GuideSearch',1, '@targetDiv')" style="width: 20px; height: 20px;" title = "Xem Trang Đầu Tiên" />
                    <input type="image" src="/Content/Images/navigate-left.ico" id="btnGoPrevious" onclick="GoToGuidePage('@Model.DeviceId', '@Model.ManufacturerId', '@Model.ModelId', '@Model.Condition', '@Model.GuideSearch','@previousPage', '@targetDiv')" style="width: 20px; height: 20px;" title = "Xem Trang Trước" />
                }
            </td>
            <td style="text-align: center; width: 60%">
                @if (Model.TotalPage == 0)
                {
                    <span align="left">Không Có Hướng Dẫn Nào</span>
                }
                else
                {
                    <span>Trang @Model.PageNo Trên Tổng Số @Model.TotalPage Trang</span>
                }
            </td>
            <td style="text-align: right; width: 20%">
                @if (Model.PageNo != Model.TotalPage && Model.TotalPage != 0)
                {
                    var targetDiv = "guideList";
                    var nextPage = @Model.PageNo + 1;
                    <input type="image" src="/Content/Images/navigate-right.ico" id="btnGoNext" onclick="GoToGuidePage('@Model.DeviceId', '@Model.ManufacturerId', '@Model.ModelId', '@Model.Condition',  '@Model.GuideSearch','@nextPage', '@targetDiv')" style="width: 20px; height: 20px" title="Xem Trang Sau" />
                    <input type="image" src="/Content/Images/hide-right.ico" id="btnGoNext" onclick="GoToGuidePage('@Model.DeviceId', '@Model.ManufacturerId', '@Model.ModelId', '@Model.Condition',  '@Model.GuideSearch','@Model.TotalPage', '@targetDiv')" style="width: 20px; height: 20px" title = "Xem Trang Cuối"/>
                }
            </td>
        </tr>
    </table>
</div>
